/*
* @Description:网络部署
* @Author: lil
* @Date: 2021/11/19
**/
<template>
  <div>
    <div class="deploy">
      <div class="deploy-hd">
        <el-button type="primary" icon="iconfont zfsoft-dianzibiaodan-daimabianjiqi" :disabled="dis"
          @click="generateConfig">生成配置文件
        </el-button>
        <el-button type="warning" icon="iconfont zfsoft-shujuguanli1" :disabled="use" @click="javadeploy">部署区块链网络
        </el-button>
      </div>
      <div class="deploy-bd">
        <pre class="deploy-bd-main" id='deployShow'>{{resdata}}</pre>
      </div>
    </div>
    <el-dialog title="部署区块链网络" :close-on-click-modal="false" :before-close="handleClose" :visible.sync="dialogVisible"
      width="35%">
      <div v-loading="isLoading" element-loading-text="jar部署中" element-loading-background="rgba(255, 255, 255, 0.7)">
        <div class="content" v-if='isCorrect'>
          <img src="~@/assets/image/deploy-success-icon.png" alt="">
          <p>操作成功，区块链网络已成功部署！</p>
        </div>
        <div class="content" v-else>
          <img src="~@/assets/image/deploy-failure-icon.png" alt="">
          <p>操作失败，请先清理网络后重新部署</p>
        </div>
        <div align="center" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getChannelList
  } from '@/api/blockchain/deploychannel'
  import {
    loadStatus,
    alertStatus
  } from '@/api/blockchain/deployhost'
  import {
    generateConfig,
    deployJava
  } from '@/api/blockchain/networkmanage'
  import {
    deployFabric
  } from '@/api/blockchain/deployblockchain'
  export default {

    data() {
      return {
        dialogVisible: false,
        dis: false,
        use: false,
        resdata: '',
        path: `ws://${process.env.VUE_APP_BASE_API_WS}/deploy/websocket/2345`,
        socket: "",
        scrollTop: null,
        isCorrect: false,
        isLoading: false
      };
    },
    mounted() {
      // 初始化
      this.init();
    },
    methods: {
      init() {
        if (typeof (WebSocket) === "undefined") {
          this.$message.warning('您的浏览器不支持socket！');
        } else {
          this.socket = new WebSocket(this.path)
          this.socket.onopen = this.open
          this.socket.onerror = this.error
          this.socket.onmessage = this.getMessage
        }
        loadStatus().then((res) => {
          this.dis = !Boolean(res.data.gen_config);
          this.use = !Boolean(res.data.deploy_fabric);
        })
      },
      open() {
        // console.log("socket连接成功")
      },
      error() {
        // console.log("连接错误")
      },
      getMessage(msg) {
        this.resdata += msg.data + '\n';
        this.$nextTick(() => {
          let msg = document.getElementById('deployShow')
          msg.scrollTop = msg.scrollHeight
        })
      },
      send(params) {
        this.socket.send(params)
      },
      close() {
        // console.log("socket已经关闭")
      },
      generateConfig() {
        let _this = this;
        getChannelList().then((res) => {
          if (res.length) {
            // 列表非空
            generateConfig().then((res) => {
              _this.resdata = res.data
              _this.dis = true;
              _this.use = false;
              // 生成配置文件成功修改状态参数4
              alertStatus(1, 2, 2, 0, 2, 2);
            }).catch(() => {});
          } else {
            _this.$message.warning('请添加通道后再进行扩展!');
          }
        })
      },
      javadeploy() {
        this.resdata = ''
        let _this = this;
        new Promise((resolve, reject) => {
          return resolve(deployFabric("deploy").then(function (res) {
            if (res.msg == 0) {
              _this.isCorrect = true;
              _this.$emit('getInfo', true);
              alertStatus(0, 0, 1, 0, 2, 1);
            } else {
              _this.isCorrect = false;
              _this.$emit('getInfo', false);
              alertStatus(0, 2, 2, 1, 1, 2);
            }
            _this.dialogVisible = true;
            _this.use = true;
          }));
        }).then(r => {
          if (_this.isCorrect) {
            _this.isLoading = true;
            return Promise.resolve(deployJava().then((res) => {
              if (res.msg == 0) {
                _this.isLoading = false;
                _this.$message.success('jar部署成功！');
              }
            }));
          }
        }).catch(function () {});
      },
      handleClose(done) {
        if (!this.isLoading) {
          done();
          this.$router.go(0);
        }
      },
      confirm() {
        this.dialogVisible = false;
        this.$router.go(0);
      }
    },
  };

</script>
<style lang="scss" scoped>
  .deploy {
    margin-top: 10px;
    border: 1px solid #e0e6f0;
    background-color: #fff;

    .deploy-hd {
      padding: 15px 20px;

      .el-button>>>i {
        margin-right: 5px;
      }
    }

    .deploy-bd {
      padding: 15px 20px;
      border-top: 1px solid #e0e6f0;

      .deploy-bd-main {
        min-height: 300px;
        max-height: 650px;
        // padding-right: 5px;
        overflow-y: auto;

        &>.div {
          word-break: break-all;
        }

        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
          margin: 0 5px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 6px;
          background: #d7d7d7;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #fff;
        }
      }
    }
  }

  .content {
    width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 37px 0 15px;
    font-size: 16px;
    color: #353535;
  }

  .dialog-footer {
    margin-bottom: 20px;
  }

</style>
